<template>
    <div class="page-header-index-wide">


        <a-card :loading="loading" :bordered="false" title="访问量统计" :style="{ marginBottom: '24px' }"  v-has="'system:login:info:statistic'" >
            <a-row>
                <a-col :span="6">
                    <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
                </a-col>
                <a-col :span="2" v-if="!isMobile()">
                    <a-spin class='circle-cust'>
                        <a-icon slot="indicator" type="environment" style="font-size: 24px"/>
                    </a-spin>
                </a-col>
                <a-col :span="6">
                    <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
                </a-col>
                <a-col :span="2" v-if="!isMobile()">
                    <a-spin class='circle-cust'>
                        <a-icon slot="indicator" type="team" style="font-size: 24px"/>
                    </a-spin>
                </a-col>
                <a-col :span="6">
                    <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
                </a-col>
                <a-col :span="2" v-if="!isMobile()">
                    <a-spin class='circle-cust'>
                        <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
                    </a-spin>
                </a-col>
            </a-row>
            <!--<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>-->
            <index-top-ranking/>


        </a-card>


        <!--<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
            <!--&lt;!&ndash;底部图表&ndash;&gt;-->
            <!--&lt;!&ndash;<index-bottom-ranking></index-bottom-ranking>&ndash;&gt;-->
        <!--</a-card>-->
    </div>
</template>

<script>
    import ACol from 'ant-design-vue/es/grid/Col'
    // import IndexBottomRanking from '@/components/chart/index/IndexBottomRanking'
    import IndexTopRanking from '@/components/chart/index/IndexTopRanking'
    import { mixinDevice } from '@/utils/mixin.js'
    // import RankList from '@/components/chart/RankList'
    // import Bar from '@/components/chart/Bar'
    import LineChartMultid from '@/components/chart/LineChartMultid'
    import HeadInfo from '@/components/tools/HeadInfo.vue'
    import Trend from '@/components/Trend'
    import { getLoginfo, getVisitInfo } from '@/api/api'

    // const barData = []
    // for (let i = 0; i < 12; i += 1) {
    //   barData.push({
    //     x: `${i + 1}月`,
    //     y: Math.floor(Math.random() * 1000) + 200
    //   })
    // }
    export default {
        name: 'IndexChart',
        components: {
            ACol,
            Trend,
            LineChartMultid,
            HeadInfo,
            // IndexBottomRanking,
            IndexTopRanking
        },
        mixins: [mixinDevice],
        data() {
            return {
                loading: true,
                center: null,
                // barData,
                loginfo: {},
                visitFields: ['ip', 'visit'],
            }
        },
        mounted() {
            setTimeout(() => {
                this.loading = !this.loading
            }, 1000)
            this.initLogInfo()
        },
        methods: {

            initLogInfo() {
                getLoginfo(null).then((res) => {
                    if (res.success) {
                        Object.keys(res.result).forEach(key => {
                            res.result[key] = res.result[key] + ''
                        })
                        this.loginfo = res.result
                    }
                })
            },

        }
    }
</script>

<style lang="less" scoped>
    .circle-cust {
        position: relative;
        top: 28px;
        left: -100%;
    }

    /* 首页访问量统计 */
    .head-info {
        position: relative;
        text-align: left;
        padding: 0 32px 0 0;
        min-width: 125px;

        &.center {
            text-align: center;
            padding: 0 32px;
        }

        span {
            color: rgba(0, 0, 0, .45);
            display: inline-block;
            font-size: .95rem;
            line-height: 42px;
            margin-bottom: 4px;
        }

        p {
            line-height: 42px;
            margin: 0;

            a {
                font-weight: 600;
                font-size: 1rem;
            }
        }
    }


</style>
